<template>
	<view>
		<view class="wrap" >
			<view class="box" :style="[itemStyle]">
				------ 
				<view class="desc">
					<image class="circel" :style="[imgStyle]" v-show="loading" :src="loadingImg"></image>
					{{loading?'正在加载':'没有更多了'}}
				</view>
				------
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		props:{
			loadingImg: {
			type: String,
				default:''
			},
			size:{
				default:20
			},
			loading:{
				default:true
			},
			fontSize:{default:14},
			marginTB:{default:0},
			paddingTB:{default:10}
		},
		computed:{
			imgStyle(){
				return{
					width:`${this.size*2}rpx`,
					height:`${this.size*2}rpx`
				}
			},
			itemStyle(){
				return{
					height:`${this.size*2}rpx`,
					'margin-top':`${this.marginTB*2}rpx`,
					'margin-bottom':`${this.marginTB*2}rpx`,
					'padding-top':`${this.paddingTB*2}rpx`,
					'padding-bottom':`${this.paddingTB*2}rpx`,
					'font-size':`${this.fontSize*2}rpx`
				}
			}
		},
		watch:{
		
			
		},
		data(){
			return{
				desc:'正在加载'
			}
		},
		methods:{
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		width: 100%;
		color: #888;
		.box{
			display: flex;
			justify-content: center;
			align-items: center;
			.desc{
				display: flex;
				align-items: center;
				margin: 0 10px;
				overflow: hidden;
			}
			.circel{
				border-radius: 100%;
				margin-top: 1px;
				animation: circel 1s linear infinite;
			}
		}
	}
	@keyframes circel{
		to{transform:rotate(1turn);}
	}
</style>
